<template>
  <!-- 盈亏详情 -->
  <el-dialog
    width="1100px"
    :title="$t('详情')"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    :before-close="cancel"
  >
    <!-- 信息 -->
    <el-row :gutter="10">
      <!-- v-hasPermi="['distribution:purchase:createPurchaseOrder']" -->
      <el-col :span="6">
        <!-- 盘点类型 1.扫码 2.手动+扫码 -->
        盘点类型:
        <span v-if="detail.type == 1">扫码</span>
        <span v-if="detail.type == 2">手动+扫码</span>
      </el-col>
      <el-col :span="6">
        <!-- 盘点进度  -->
        盘点进度
        <span>{{ detail.awaitNum }}</span>
      </el-col>
      <el-col :span="6">
        <!-- 审核状态 1.未审核 2.已审核 3.取消盘点-->
        审核状态:
        <span v-if="detail.status == 1">未审核</span>
        <span v-if="detail.status == 2">已审核</span>
        <span v-if="detail.status == 3">取消盘点</span>
      </el-col>
      <el-col :span="6">
        <!-- 总盈亏 -->
        总盈亏:
        <span>{{ detail.profitLoss | thousand }}</span>
      </el-col>
    </el-row>
    <!-- 增删改查 -->
    <el-row style="margin: 15px 0" :gutter="10">
      <!-- v-hasPermi="['distribution:purchase:createPurchaseOrder']" -->
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-download"
          plain
          size="mini"
          @click="handleExport"
          v-hasPermi="['distribution:stockCheck:stockCheckProfitLossExport']"
        >
          <!-- 导出 -->
          {{ $t('导出') }}
        </el-button>
      </el-col>
    </el-row>
    <el-table ref="TableRef" :data="tableData">
      <!-- 所属者 库位号 sku 产品名 快照数量 确认数量 快照单价 盈亏 -->
      <!-- 所属者 -->
      <el-table-column show-overflow-tooltip prop="distrName" label="所属者" align="center" />
      <!-- 库位号 -->
      <el-table-column show-overflow-tooltip prop="positionNo" :label="$t('库位号')" align="center" />
      <!-- sku -->
      <el-table-column show-overflow-tooltip prop="skuNo" label="sku" align="center" />
      <!-- 产品名 -->
      <el-table-column show-overflow-tooltip prop="skuNameCn" label="产品名" align="center" />
      <!-- 快照数量 -->
      <el-table-column show-overflow-tooltip prop="stockSnap" label="快照数量" align="center" />
      <!-- 确认数量 -->
      <el-table-column show-overflow-tooltip prop="confirmNum" label="确认数量" align="center" />
      <!-- 差异数量 -->
      <el-table-column show-overflow-tooltip prop="differenceNum" label="差异数量" align="center" />
      <!-- 快照单价 -->
      <el-table-column show-overflow-tooltip prop="priceSnap" label="快照单价" align="center">
        <template #default="{ row }">
          {{ row.priceSnap | thousand }}
        </template>
      </el-table-column>
      <!-- 盈亏 -->
      <el-table-column show-overflow-tooltip prop="profitLoss" :label="$t('盈亏')" align="center">
        <template slot-scope="{ row }">
          {{ (row.confirmNum || 0) * (row.priceSnap || 0) - (row.stockSnap || 0) * (row.priceSnap || 0) }}
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        <!-- 关闭 -->
        {{ $t('关闭') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getStockCheckProfitLoss, getStockCheckProfitLossInfo } from '@/api/distribution/sku/Inventory'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * id
     */
    id: {
      type: [String, Number],
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      pageTotal: 0,
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        checkId: '',
      },
      detail: {},
    }
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = 10
        this.queryParams.checkId = this.id
        this.getList()
        this.getDetail()
      }
    },
  },
  methods: {
    getList() {
      getStockCheckProfitLoss(this.queryParams).then((res) => {
        const { code, rows, total } = res
        if (code === 200) {
          this.tableData = rows
          this.pageTotal = total
        }
      })
    },
    getDetail() {
      getStockCheckProfitLossInfo(this.queryParams.checkId).then((res) => {
        const { code, data } = res
        if (code === 200) {
          this.detail = data
        }
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
    handleExport() {
      this.download(
        'distribution/stockCheck/stockCheckProfitLossExport',
        {
          ...this.queryParams,
        },
        `export_${new Date().getTime()}.xlsx`,
      )
    },
  },
}
</script>
<style scoped lang="scss"></style>
